<style>
.no-style-link {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的颜色，通常是黑色或默认文本颜色 */
}
</style>

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px;text-align: center">茶博士智能销售系统</el-header>
      <el-button type="danger" @click="logout">退出</el-button>
      <el-container>
        <el-aside width="230px" style=" border: 1px solid #eee">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>信息系统管理</template>
              <el-menu-item index="1-1">
                <router-link to="/admin/user" class="no-style-link">用户管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/admin/teas" class="no-style-link">茶品管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-3">
                <router-link to="/admin/orders" class="no-style-link">订单管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-4">
                <router-link to="/admin/inventorys" class="no-style-link">库存管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-5">
                <router-link to="/admin/sales" class="no-style-link">销售管理</router-link>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>

          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="茶名：">
              <el-input v-model="searchForm.tname" placeholder="请输入茶名..."></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="reset">重置</el-button>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addOrder">新增订单</el-button>
            </el-form-item>
          </el-form>


          <el-table :data="tableData" border>
            <el-table-column prop="oid" label="订单编号" width="80"></el-table-column>
            <el-table-column prop="tid" label="茶品id" width="100"></el-table-column>
            <el-table-column prop="tname" label="茶名" width="120"></el-table-column>
            <el-table-column prop="num" label="数量" width="100"></el-table-column>
            <el-table-column prop="price" label="单格" width="100"></el-table-column>
            <el-table-column prop="allprice" label="总价" width="100"></el-table-column>
            <el-table-column prop="content" label="备注" width="100"></el-table-column>
            <el-table-column prop="type" label="类型" width="100"></el-table-column>
            <el-table-column prop="paytype" label="支付类型" width="100"></el-table-column>
            <el-table-column prop="times" label="下单时间" width="180"></el-table-column>
            <el-table-column prop="note" label="支付详情" width="100"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" size="mini" @click="editOrder(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 内嵌表单-->
          <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
            <el-form :model="oneOrderInfoForm">
              <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.oid" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="茶品id" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.tid" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="茶名" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.tname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.num" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="单格" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="总价" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.allprice" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.content" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="支付类型" :label-width="formLabelWidth">
                <el-select v-model="oneOrderInfoForm.paytype" placeholder="请选择支付类型">
                  <el-option label="微信支付" value="WeChat Pay"></el-option>
                  <el-option label="支付宝" value="Alipay"></el-option>
                </el-select>
              </el-form-item>
<!--              <el-form-item label="时间：" :label-width="formLabelWidth">-->
<!--                <el-input v-model="oneOrderInfoForm.times" autocomplete="off"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="支付详情" :label-width="formLabelWidth">
                <el-select v-model="oneOrderInfoForm.note" placeholder="支付详情">
                  <el-option label="已支付" value="已支付"></el-option>
                  <el-option label="未支付" value="未支付"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 内嵌表单-->
          <el-dialog title="用户信息" :visible.sync="dialogFormVisible2">
            <el-form :model="oneOrderInfoForm">
              <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.oid" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="茶品id" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.tid" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="茶名" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.tname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.num" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="单格" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="总价" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.allprice" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.content" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="类型" :label-width="formLabelWidth">
                <el-input v-model="oneOrderInfoForm.type" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="支付类型" :label-width="formLabelWidth">
                <el-select v-model="oneOrderInfoForm.paytype" placeholder="请选择支付类型">
                  <el-option label="微信支付" value="WeChat Pay"></el-option>
                  <el-option label="支付宝" value="Alipay"></el-option>
                </el-select>
              </el-form-item>
<!--              <el-form-item label="时间：" :label-width="formLabelWidth">-->
<!--                <el-input v-model="oneOrderInfoForm.times" autocomplete="off"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="支付详情" :label-width="formLabelWidth">
                <el-select v-model="oneOrderInfoForm.note" placeholder="支付详情">
                  <el-option label="已支付" value="已支付"></el-option>
                  <el-option label="未支付" value="未支付"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addOrderForm">确 定</el-button>
            </div>
          </el-dialog>


        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        tname: ""
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogTableVisible2: false,
      dialogFormVisible2: false,
      oneOrderInfoForm: {
        oid: '',
        tid: '',
        tname: '',
        num: '',
        price: '',
        delivery: false,
        type: [],
        allprice: '',
        content: '',
        paytype: '',
        times: '',
        note: ''
      },
      formLabelWidth: '120px',
      visible: false,
    }
  },
  methods: {
    onSubmit() {
      if (this.searchForm.tname == "") {
        axios.get("/api/admin/orders").then(res => {
          this.tableData = res.data.data;
          // this.$message.success('查询成功');
        });
      }
      if (this.searchForm.tname != "") {
        axios.get(`/api/admin/orders/search/${this.searchForm.tname}`).then(res => {
          console.log(res.data.data)
          this.tableData = res.data.data;
          this.$message.success('查询成功');
        });
      }
    },
    reset(){
      this.searchForm = {
        tname: ""
      }
      axios.get("/api/admin/orders").then(res => {
        this.tableData = res.data.data;
        this.$message.success('重置成功');
      });
    },
    editOrder(row) {
      this.oneOrderInfoForm = {...row}; // 将当前行数据复制到表单
      this.dialogFormVisible = true; // 显示弹窗
      console.log("当前编辑的订单ID:", row.oid);
    },
    deleteOrder(row) {
      this.oneOrderInfoForm = {...row}; // 将当前行数据复制到表单
      console.log("当前删除的订单ID:", row.oid); // 打印当前用户ID
      axios.delete(`/api/admin/orders/${row.oid}`).then(res => {
        this.$message.success(res.data.msg || '删除成功'); // 显示成功消息
        this.onSubmit(); // 刷新表格数据
      }).catch(err => {
        this.$message.error(err.data.msg || '删除失败，请联系管理员'); // 显示错误消息
      });
    },
    submitForm() {
      axios.put(`/api/admin/orders`, this.oneOrderInfoForm)
          .then(res => {
            this.$message.success(res.data.message || '更新成功'); // 显示成功消息
            this.dialogFormVisible = false; // 关闭弹窗
            this.onSubmit(); // 刷新表格数据
          })
          .catch(err => {
            console.error(err);
            this.$message.error('更新失败，请重试'); // 显示错误消息
          });
      this.dialogFormVisible = false; // 关闭弹窗
      console.log(this.oneOrderInfoForm)
    },
    addOrder() {
      this.dialogFormVisible2 = true; // 显示弹窗
      this.oneOrderInfoForm = {
        oid: '',
        tid: '',
        tname: '',
        num: '',
        price: '',
        delivery: false,
        type: [],
        allprice: '',
        content: '',
        paytype: '',
        times: '',
        note: ''
      }
    },
    addOrderForm(){
      axios.post("/api/admin/orders", this.oneOrderInfoForm).then(res => {
        this.$message.success(res.data.message || '更新成功'); // 显示成功消息
        this.dialogFormVisible2 = false; // 关闭弹窗
        this.onSubmit(); // 刷新表格数据
      }).catch(err => {
        console.error(err);
        this.$message.error('更新失败，请重试'); // 显示错误消息
      });
      this.dialogFormVisible2 = false; // 关闭弹窗
      console.log(this.oneTeaInfoForm)
    },
    logout() {
      // 清除 Cookies 中的 token
      Cookies.remove('token', { path: '/' });
      this.$message.success('已退出登录');
      // 跳转到登录页面
      this.$router.push({ name: 'login' });
    }
  },
  mounted() {
    axios.get("/api/admin/orders").then(res => {
      this.tableData = res.data.data;
    });
  }
}
</script>
